<template>
  <div class="attr-wrapper">

    <div v-for="(item,index) in localAttrList" :key="index">

      <div class="attr-row attr-row_strip flex-box">
        <div class="attr-row__title">属性名</div>
        <el-input class="attr-row__input" size="small" v-model="item.name"></el-input>
        <div class="flex-box__item"></div>
        <i class="el-icon-circle-close attr-row__remove" @click="removeOne(index)"></i>
      </div>

      <div class="attr-row flex-box">
        <div class="attr-row__title">属性值</div>
        <div v-for="(input, idx) in item.list" :key="idx">
          <el-input class="attr-row__input" size="small" v-model="input.value" @blur="genHash">
            <i class="el-icon-close el-input__icon attr-row__remove" slot="suffix" @click="removeItem(index,idx)"></i>
          </el-input>
        </div>
        <el-button type="text" @click="addItem(index)">增加属性值</el-button>
      </div>
    </div>

    <div class="attr-row attr-row_strip flex-box">
      <el-button @click="addOne" :disabled="addLimit">增加属性项目</el-button>
      <div v-show="addLimit" class="add-limit">最多只能添加3个属性项目</div>
    </div>
  </div>
</template>

<script>
export default {
  // 全局感知
  name: "AddAttr",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {
    attrList: {
      type: Array,
      required: false,
      default: () => ([])
    },
    hash: {
      type: Number,
      required: true
    }
  },

  // 本地状态
  data () {
    return {
      localAttrList: this.attrList,
      localHash: this.hash,
      currentAttr: null
    };
  },
  computed: {
    addLimit () {
      return this.localAttrList.length >= 3
    }
  },

  // 事件
  watch: {
    attrList (list) {
      this.localAttrList = list
    },
    localHash (localHash) {
      this.$emit('update:attrList', this.localAttrList)
      this.$emit('update:hash', localHash)
    },
    hash (hash) {
      this.localHash = hash
    }
  },
  beforeCreate () { },
  created () { },
  beforeMount () { },
  mounted () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },

  // 非响应式的属性
  methods: {
    addOne () {
      const empty = { name: '', list: [{ value: '' }] }
      this.localAttrList.push(empty)
    },
    removeOne (index) {
      this.localAttrList.splice(index, 1)
      this.genHash()
    },
    addItem (index) {
      this.localAttrList[index].list.push({ value: '' })
    },
    removeItem (index, idx) {
      this.localAttrList[index].list.splice(idx, 1)
      this.genHash()
    },
    genHash () {
      this.localHash = Math.random()
    }
  }
}
</script>

<style lang="less" scoped>
.flex-box {
  display: flex;

  box-sizing: border-box;

  align-items: center;
  &__item {
    flex: 1;
  }
}
.add-limit {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}
.attr {
  &-wrapper {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    margin-left: 20px;

    border: 1px solid #d8d8d8;
  }
  &-row {
    width: 100%;
    height: 52px;
    padding: 0 20px;
    &_strip {
      background: #f6f6f6;
      &:hover .attr-row__remove {
        display: block;
      }
    }
    &__title {
      width: 5em;

      color: #333;

      font-size: 14px;
    }
    &__input {
      width: 140px;
      margin-right: 10px;
      &:hover .attr-row__remove {
        display: block;
      }
    }
    &__remove {
      display: none;
    }
  }
}
</style>